<template>
  <a-card :body-style="{ padding: '24px 48px' }" :bordered="false">
    <a-form :form="form" :labelCol="labelCol" :wrapperCol="{ span: 12 }">
      <a-form-item v-if="hasPermission('queryEnabled')">
        <span slot="label" class="setting-item-title">业务查询日志开关</span>
        <a-radio-group
          v-decorator="['queryEnabled', decoratorOptions.queryEnabled]"
        >
          <a-radio class="setting-radio" value="1"> 启用 </a-radio>
          <a-radio class="setting-radio" value="0"> 关闭 </a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item v-if="hasPermission('checkEnabled')">
        <span slot="label" class="setting-item-title">查看日志开关</span>
        <a-radio-group
          v-decorator="['checkEnabled', decoratorOptions.checkEnabled]"
        >
          <a-radio class="setting-radio" value="1"> 启用 </a-radio>
          <a-radio class="setting-radio" value="0"> 关闭 </a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item v-if="hasPermission('addEnabled')">
        <span slot="label" class="setting-item-title">新增日志开关</span>
        <a-radio-group
          v-decorator="['addEnabled', decoratorOptions.addEnabled]"
        >
          <a-radio class="setting-radio" value="1"> 启用 </a-radio>
          <a-radio class="setting-radio" value="0"> 关闭 </a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item v-if="hasPermission('editEnabled')">
        <span slot="label" class="setting-item-title">修改日志开关</span>
        <a-radio-group
          v-decorator="['editEnabled', decoratorOptions.editEnabled]"
        >
          <a-radio class="setting-radio" value="1"> 启用 </a-radio>
          <a-radio class="setting-radio" value="0"> 关闭 </a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item v-if="hasPermission('delEnabled')">
        <span slot="label" class="setting-item-title">删除日志开关</span>
        <a-radio-group
          v-decorator="['delEnabled', decoratorOptions.delEnabled]"
        >
          <a-radio class="setting-radio" value="1"> 启用 </a-radio>
          <a-radio class="setting-radio" value="0"> 关闭 </a-radio>
        </a-radio-group>
      </a-form-item>
      
      <a-form-item v-if="hasPermission('sqlEnabled')">
        <span slot="label" class="setting-item-title">SQL日志开关</span>
        <a-radio-group
          v-decorator="['sqlEnabled', decoratorOptions.sqlEnabled]"
        >
          <a-radio class="setting-radio" value="1"> 启用 </a-radio>
          <a-radio class="setting-radio" value="0"> 关闭 </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item v-if="hasPermission('appResourceQueryEnabled')">
        <span slot="label" class="setting-item-title">应用资源列表查询日志开关</span>
        <a-radio-group
          v-decorator="['appResourceQueryEnabled', decoratorOptions.appResourceQueryEnabled]"
        >
          <a-radio class="setting-radio" value="1"> 启用 </a-radio>
          <a-radio class="setting-radio" value="0"> 关闭 </a-radio>
        </a-radio-group>
      </a-form-item>
      

      <a-form-item v-if="hasPermission('sysLogStorage')">
        <span slot="label" class="setting-item-title">审计日志存储容量</span>
        <a-input
          autocomplete="off"
          style="width: 125px"
          addon-after="GB"
          @keyup="clearNoNum"
          @blur="clearNoNum"
          v-decorator="[
            'storage',
            {
              rules: [
                { required: true, message: '请输入审计日志存储容量' },
                { validator: validators.xmax({max:100}), trigger: 'change', },
                { validator: validators.xmin({min:1}), trigger: 'change', },
              ],
            },
          ]"
        />
        <!-- <a-input-number
          :min="1"
          :max="100"
          :parser="
            (value) => (value ? (isNaN(value) ? 0 : parseInt(value)) : 0)
          "
          v-decorator="['storage', decoratorOptions.storage]"
        />
        <div class="rule-unit">GB</div> -->
      </a-form-item>
    </a-form>

    <div :style="btnStyle" v-if="hasPermission('sysLogConfig')">
      <a-button type="primary" style="padding: 0 20px" @click="setLogCfg">
        保存
      </a-button>
    </div>
  </a-card>
</template>

<script>
import { getAction, gPostAction } from "@/api/manage";
import { filterNoNum, hasRight } from "@/utils/util";

export default {
  name: "F0504",
  data() {
    return {
      form: this.$form.createForm(this),
      decoratorOptions: {
        queryEnabled: {
          rules: [{ required: true, message: "请选择查询日志开关" }],
        },
        checkEnabled: {
          rules: [{ required: true, message: "请选择查看日志开关" }],
        },
        addEnabled: {
          rules: [{ required: true, message: "请选择新增日志开关" }],
        },
        editEnabled: {
          rules: [{ required: true, message: "请选择修改日志开关" }],
        },
        delEnabled: {
          rules: [{ required: true, message: "请选择删除日志开关" }],
        },
        sqlEnabled: {
          rules: [{ required: true, message: "请选择SQL日志开关" }],
        },
        appResourceQueryEnabled: {
          rules: [{ required: true, message: "请选择应用资源列表查询开关" }],
        },
        storage: {
          rules: [{ required: true, message: "请输入存储容量" }],
        },
      },
      labelCol: { span: 5 },
      btnStyle: { margin: '2% 0px 0px 22%' },
      configInfo: {},
    };
  },
  mounted() {
    if (!hasRight('appResourceQueryEnabled')) {
      this.labelCol = { span: 3 };
      this.btnStyle = { margin: '2% 0px 0px 14%' };
    }
    this.loadLogCfg();
  },
  methods: {
    hasPermission(code) {
      return hasRight(code);
    },
    clearNoNum() {
      this.form.setFieldsValue({
        storage: filterNoNum(this.form.getFieldValue('storage')),
      });
      this.form.validateFields(['storage'], (errors, values) => {});
    },
    loadLogCfg() {
      getAction("/sys/log/getConfig", {}).then((res) => {
        if (res.success) {
          const config = {};
          res.result.forEach((item) => {
            let text = item.text;
            let val = item.value;
            if (text === 'appQuerySwitch') {
              config[text] = (val === "null" ? "1" : val);
            } else {
              config[text] = (val === "null" ? "" : val);
            }
          });
          this.configInfo = config;
          this.form.setFieldsValue({
            addEnabled: config.addSwitch,
            delEnabled: config.deleteSwitch,
            queryEnabled: config.listSwitch,
            checkEnabled: config.detailSwitch,
            editEnabled: config.updateSwitch,
            sqlEnabled: config.sqlSwitch,
            appResourceQueryEnabled: config.appQuerySwitch,
            storage: config.capacity,
          });
        }
      });
    },
    setLogCfg() {
      this.form.validateFields((err, values) => {
        if (err) {
          return;
        }
        const postData = {
          addSwitch: values.addEnabled || this.configInfo.addSwitch,
          deleteSwitch: values.delEnabled || this.configInfo.deleteSwitch,
          detailSwitch: values.checkEnabled || this.configInfo.detailSwitch,
          listSwitch: values.queryEnabled || this.configInfo.listSwitch,
          updateSwitch: values.editEnabled || this.configInfo.updateSwitch,
          sqlSwitch: values.sqlEnabled || this.configInfo.sqlSwitch,
          appQuerySwitch: values.appResourceQueryEnabled || this.configInfo.appQuerySwitch,
          capacity: values.storage || this.configInfo.capacity,
        };

        getAction("/sys/log/config", postData).then((res) => {
          if (res.success) {
            this.$message.success("操作成功");
          }
        });
      });
    },
  },
};
</script>

<style
  lang="less"
  scoped
>
/deep/ .ant-form-item {
  margin-bottom: 18px;
}

/deep/ .ant-form-item-label {
  margin-right: 10px;
}

.setting-item-title {
  height: 45px;
  line-height: 45px;
  font-size: 14px;
  color: #101010;
}

.setting-radio {
  height: 45px;
  line-height: 45px;

  /deep/ .ant-radio {
    margin-right: 4px;
  }
}
</style>